<template>
    <el-tabs v-model="activeName" class="TextLeft" type="border-card">
        <el-tab-pane label="接口" name="0">
            <div style="display: flex;align-items: center; margin-bottom: 10px">
                <el-tag type='success' size="large">
                    数据源
                </el-tag>
                <el-select-v2 v-model="config.function.select" :options="fun_port.options" placeholder="请选择功能接口"
                    size="large" />
            </div>
            <UartConfig v-if="cur_select === 'uart'" :config="uart_config" @listen="(state) => config.listen = state" />
        </el-tab-pane>
        <el-tab-pane label="显示" name="1">显示</el-tab-pane>
        <el-tab-pane label="发送" name="2">发送</el-tab-pane>
        <el-tab-pane label="透传" name="3">透传</el-tab-pane>
    </el-tabs>
</template>

<script setup lang="ts">
import UartConfig from './left_components/uart_config.vue'
const props = defineProps({
    configs: {
        type: Object,
        default: {
        }
    }
})
const config = toRef(props.configs)
const activeName = ref('0')
const fun_port = ref({
    options: [
        {
            value: 'uart',
            label: 'UART'
        },
        {
            value: 'i2c',
            label: 'I2C'
        },
        {
            value: 'adc',
            label: 'ADC'
        },
        {
            value: 'spi',
            label: 'SPI'
        },
        {
            value: 'dap',
            label: 'DAP'
        },
        {
            value: 'tcp',
            label: 'TCP'
        },
        {
            value: 'udp',
            label: 'UDP'
        },
    ]
})
const uart_config = ref({
    baudrate: 115200,
    parity: 0,
    stopbits: 1,
    databits: 8,
    RTS: false,
    CTS: false,
})

const cur_select = computed(() => {
    const res = config.value.function.select
    if (res.toUpperCase() === 'UART') {
        config.value.function.config = uart_config.value
    }
    return res
})
</script>

<style scoped>
.TextLeft {
    height: 100%;
    width: 100%;
    border: none;
    background-color: #f9fafb;
}

.el-tag {
    margin-right: 5px;
    font-size: 0.9em;
}

:deep(.el-tabs__content) {
    padding: 5px;
}
</style>